<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影票</title>
    <link type="text/css" rel="stylesheet" href="css/text.css"/>
</head>
<body>
	<div id="component">
    	<div class="content" id="content">
	    	<div class="title">查询电影</div>
	        <div id="item">
	            <label>电影名称</label><input type="text" v-model="mname">
	        </div>
	        <div id="item">
	            <label>主演</label><input type="text" v-model="mart">
	        </div>
	        <div id="item" class="table">
	            <label>类别</label>
	            <select class="text2" @change="gradeChange($event)">
	                <option v-for="(item,index) in types">{{item.tname}}</option>
	            </select>
	        </div>
	        <div id="item">
	            <label>导演</label><input type="text" v-model="mguide">
	        </div>
	        <div id="item">
	            <label>价格</label><input type="text" v-model="mprice1">至<input type="text" v-model="mprice2">
	        </div>
	        <div>
	            <button class="button1"  @click="up">查询电影</button>
	            <button class="button1"  @click="select">发布电影</button>
	        </div>
    	</div>
          <div id="content2" class="content">
	    	<table border="1" width="300">
	    		<thead class="title">
	    			<tr>电影</tr>
	    			<tr>
		    			<td>电影名称</td>
		    			<td>主演</td>
		    			<td>导演</td>
		    			<td>价格</td>
	    			</tr>
	    		</thead>
	    		<tbody>
	    			<tr v-for="(item,index) in moviees">
	    				<td>{{item.mname}}</td>
	    				<td>{{item.mart}}</td>
	    				<td>{{item.mguide}}</td>
	    				<td>{{item.mprice}}</td>
	    			</tr>
	    		</tbody>
	    	</table>
    	</div>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript">
let app = new Vue({
	el:"#component",
	data:{
		typeInfo:null,
		types:[],
		mname:null,
		mart:null,
		mguide:null,
		mprice1:null,
		mprice2:null,
		count:0,
		moviees:[]
	},
	methods:{
		gradeChange:function(event){
			this.count+=1;
			this.typeInfo=event.target.value;
		},
		up:function(){
				if(this.count==0){
					this.typeInfo=this.types[0].tname;
				}
				let params = new URLSearchParams();
				params.append("mname",this.mname);
				params.append("mart",this.mart);
				params.append("mguide",this.mguide);
				params.append("mprice1",this.mprice1);
				params.append("mprice2",this.mprice2);
				params.append("typeInfo",this.typeInfo);
				axios.post("up/selectMovic",params).then(rt =>{
	      			if(rt.data.code == 500){
	      				alert(rt.data.data);
	      			}else if(rt.data.code == 404){
	      				alert(rt.data.data);
	      			}else if(rt.data.code == 200){
	      				this.moviees=rt.data.data;
	      				console.log(this.moviees);
	      				$("#content").css("display","none");
	      				$("#content2").css("display","block");
	      			}
				})
		},
		select: function(){
			location.href="index.html";
		}
	},
	mounted:function(){
		axios.get("up/findType").then(rt =>{
			let type1={tid:0,tname:"全部"};
			this.types=rt.data.data;
			this.types.unshift(type1);//添加
		})
	}
})
</script>
</html>